<template>
	<view class="bg-white" style="padding-bottom: 50px" v-if="cartStore.cart.length!=0">
		<myAddress></myAddress>
		<view class="flex align-center font pl-1 border-bottom bg-white" style="height: 40px;">
			<uni-icons type="shop"></uni-icons>
			<text class="pl-2">购物车</text>
		</view>
		<uni-swipe-action ref="saction">
			<block v-for="(item,i) in cartStore.cart" :key="i">
				<uni-swipe-action-item :rightOptions="options" @click="swipeActionClickHandler(item)">
					<myGoods :showRadio="true" :showNum="true" :item="item" @radio_change="radioChangeHandler"
						@num_change="numChangeHandler" @detail="gotoDetail"></myGoods>
				</uni-swipe-action-item>
			</block>
		</uni-swipe-action>
		<view>
			<mySettle></mySettle>
		</view>
	</view>
	<view v-else class="flex flex-column align-center " style="padding-top: 150px;">
		<image src="../../static/cart_border@2x.png" style="display: block;height: 90px;width: 90px"></image>
		<text style="font-size: 12px;padding-top: 15px;color: gray;">空空如也</text>

	</view>
</template>

<script setup>
	import {
		onShow
	} from "@dcloudio/uni-app"

	import {
		useCartStore
	} from "../../store";
	import {
		ref
	} from "vue";

	const saction = ref()


	const cartStore = useCartStore()

	const options = ref([{
		text: '删除',
		style: {
			backgroundColor: '#C00000'
		}
	}])

	const gotoDetail = (goods_id) => {
		uni.navigateTo({
			url: "/subpkg/goods_detail/goods_detail?goods_id=" + goods_id
		})
	}

	onShow(() => {
		uni.setTabBarBadge({
			index: 2,
			text: cartStore.total + ''
		})
	})

	const swipeActionClickHandler = (goods) => {
		cartStore.removeGoodsById(goods.goods_id)
		uni.setTabBarBadge({
			index: 2,
			text: cartStore.total + ''
		})
		saction.value.closeAll()
	}

	const radioChangeHandler = (goods) => {
		cartStore.updateState(goods)
	}

	const numChangeHandler = (goods) => {
		cartStore.updateGoodsCount(goods)
		uni.setTabBarBadge({
			index: 2,
			text: cartStore.total + ''
		})
	}
</script>

<style>

</style>